Mood Boards in UX: How and Why to Use Them 使用者體驗中的情緒板：如何及為何使用它們

Mood Board（情緒板）是一種透過影象、影片和文字拼貼來傳遞特定感受的視覺工具。它在設計領域應用廣泛，從品牌到室內設計，甚至延伸至音樂和香氛等非視覺領域。在使用者體驗（UX）設計中，情緒板幫助團隊收集靈感、傳遞品牌特性，併為產品視覺方向提供清晰指導。

為什麼在UX/UI設計中使用情緒板 (Why Use Mood Boards for UX or UI Design)

作用：情緒板能直觀展示數字產品應傳遞的情感或價值。它簡單易懂，適合沒有設計經驗的人理解。

示例：團隊為城市建設工人設計職業應用，可先定義以下視覺情感：

這些詞能建立語調，但並不能直接指導視覺設計。因此，透過情緒板，展示年輕工人努力工作的場景和充滿能量的城市景觀，並使用藍黃配色，讓團隊明確產品的設計風格。

（左）一個針對城市建築工人的移動應用程式的情緒板示例，包括相關照片、顏色、關鍵字和短語。（右）該應用程式的使用者介面設計原型是基於情緒板建立的。

情緒板的用途：

  1. 定義UI的主色調和視覺設計特性。
  1. 包括語調關鍵詞、營銷理念、互動設計模式或其他產品截圖，用作後續風格指南的參考。
  1. 團隊協作：收集靈感，統一設計方向，減少誤解。

何時建立情緒板 (When to Create Mood Boards)

雖然這兩個情緒板都是為一個旅行應用程式製作的，但每個都傳達了不同的視覺主題。在產品設計過程的早期進行協作建立時，情緒板有助於團隊縮小差距，鞏固產品的視覺方向，並減少未來溝通不暢的可能性。

時間節點：

  1. 早期設計階段： 新產品設計或現有產品的重大改版中使用情緒板，例如設計思維的“定義”或“創意”階段。
  1. 團隊協作： 可以由團隊成員共同建立，由UI設計師、視覺設計師等領導，同時邀請產品負責人、設計領導或內容管理者參與。

多版本情緒板：為探索不同的視覺情緒，建議建立多個情緒板。例如，為旅行應用設計的兩種情緒板可能傳遞完全不同的視覺主題，幫助團隊縮小差距並統一視覺方向。

在人物角色（Persona）建立中的應用：情緒板可幫助視覺化角色特性，如興趣愛好、居住地、職業等，使角色更具體和生動。

在人物角色中使用情緒板的示例（這些示例由一位選擇保持匿名的使用者體驗設計師分享。）

如何建立與使用情緒板 (How to Create and Use Mood Boards)

1. 審查現有材料Review Existing Materials

檢查品牌身份或風格指南，確保情緒板與現有標準一致。

2. 選擇工具Select the Tool

實體工具：使用白板或泡沫板，適合喜歡動手操作的團隊，但不適合遠端協作，且儲存、共享較難。數字工具：

使用支援遠端協作的工具，如Miro、Mural或FigJam，便於多人實時協作。

3. 選擇情緒Digital Mood-Board Tools

討論產品目標使用者的感受，確定4–5個關鍵詞。

使用字典或思維導圖尋找近義詞，分析細微差異。

結合多個詞彙分組，找到最能表達目標情緒的詞。

各種專業人士在 FigJam 上合作製作情緒板。

用便利貼將幾個表示情緒的詞及其同義詞分組。這些詞是建立情緒板的基礎。

4. 收集視覺資源

來源：Google圖片搜尋、社交媒體、Pinterest、Behance等。

物理物件，如雜誌、書籍或個人物品。

提示：確保資源統一，避免將相互矛盾的影象放入同一情緒板中。如果有多個不同概念，分別建立獨立的情緒板。

各種影象、排版和使用者介面設計資源被儲存在一個共享的 Pinterest 板上，作為與一個未來主義且充滿活力的舞蹈平臺相關的情緒板的素材。
大量收集截圖和示例可能會使情緒板偏向於功能而非特定的情緒。這個例子更適合用於“競爭分析板”或參考板，而不是情緒板。

5. 排列視覺元素Arrange the Visuals

優先突出最重要的視覺資源，將其放大或置於中心位置。

對同類資源分組，利用留白保持視覺層次和整潔。

同樣的一組視覺元素可以以不同的方式排列，以稍有不同的方式傳達資訊。左邊的板子側重於顏色和圖案，而右邊的板子則突出文字。

6. 共享情緒板

獨立完成的情緒板需與團隊分享，收集反饋和建議。

如果團隊成員分別製作情緒板，將它們整合並比較，發現共同點和差異。

反饋機制：在情緒板上直接用便籤標註意見，使用顏色區分（如綠色表示建議保留，紅色表示應避免）。

在情緒板上直接用便利貼交換反饋意見的一個示例。